`:top
`!Raphaël`!, named for Italian painter `F33f`_`[Raffaello Sanzio da Urbino`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Raffaello_Sanzio_da_Urbino]`_`f,`:cite-ref-3[`F5bf`_`[3`#cite-note-3]`_`f] is a `F33f`_`[cross-browser`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Cross-browser]`_`f `F33f`_`[JavaScript`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=JavaScript]`_`f library that draws `F33f`_`[Vector graphics`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Vector_graphics]`_`f for web sites. It will use `F33f`_`[SVG`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Scalable_Vector_Graphics]`_`f for most browsers, but will use `F33f`_`[VML`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Vector_Markup_Language]`_`f for older versions of `F33f`_`[Internet Explorer`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Internet_Explorer]`_`f. Raphaël currently supports `F33f`_`[Chrome`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Chrome_browser]`_`f 5.0+ `F33f`_`[Firefox`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Firefox]`_`f 3.0+, `F33f`_`[Safari`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Safari_(web_browser)]`_`f 3.0+, `F33f`_`[Opera`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Opera_(web_browser)]`_`f 9.5+ and `F33f`_`[Internet Explorer`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Internet_Explorer]`_`f 6.0+.
>>Contents
• `F0af`_`[Use`#use]`_`f
• `F0af`_`[Usage`#usage]`_`f
• `F0af`_`[See also`#see-also]`_`f
• `F0af`_`[References`#references]`_`f
• `F0af`_`[Further reading`#further-reading]`_`f
• `F0af`_`[External links`#external-links]`_`f
-─
>>Use
Raphaël is used by first creating an instance of the Raphaël `F33f`_`[object`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Object_(computer_science)]`_`f, which manages the creation of the canvas. The following examples create a canvas that is 320 pixels wide and 200 pixels high:
`B100`F9d9// top left of canvas at the viewport's 10,50 coordinate`f`b
`B100`F9d9var r = Raphael(10, 50, 320, 200);`f`b
`B100`F9d9`f`b
`B100`F9d9// top left of canvas at the top left corner of the #example element (in elements where dir="ltr")`f`b
`B100`F9d9var r = Raphael(document.getElementById("example"), 320, 200);`f`b
`B100`F9d9`f`b
`B100`F9d9// same as above`f`b
`B100`F9d9var r = Raphael("example", 320, 200);`f`b
Once the Raphaël object has been instantiated, its various drawing, resizing and animation methods may be called to build up a vector graphic. This library includes support of Cùfon fonts, a format that turns a given font into a set of vector paths. It is extensible through plugins.
>>Usage
The widget is used on the `F33f`_`[Washington Post`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Washington_Post]`_`f and the `F33f`_`[Times Online`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=The_Times]`_`f websites.
Raphaël is also used by `F33f`_`[iCloud`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=ICloud]`_`f.com, and by `F33f`_`[Mass Relevance`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Mass_Relevance]`_`f in the `F33f`_`[White House`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=White_House]`_`f.`:cite-ref-4[`F5bf`_`[4`#cite-note-4]`_`f]
>>See also
• `F33f`_`[D3.js`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=D3.js]`_`f
>>References
`:cite-note-1`!1.`! "Raphaël—JavaScript library".
`:cite-note-2`!2.`! "Releases · DmitryBaranovskiy/raphael". `*`F33f`_`[GitHub`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=GitHub]`_`f`*. Retrieved 2021-03-10.
`:cite-note-3`!3.`! `F0af`_`[↑`#cite-ref-3]`_`f "An Intro to Raphaël".
`:cite-note-4`!4.`! `F0af`_`[↑`#cite-ref-4]`_`f Raphaël in White House: “we (@massrelevance) used @raphaeljs 2.0 for the map viz used during the #AskObama event today http://t.co/EcqROIi”
>>Further reading
• `:citerefwilson2013`aWilson, Chris (December 2013). `*RaphaelJS`*. `F33f`_`[O'Reilly Media`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=O'Reilly_Media]`_`f. `F33f`_`[ISBN`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=ISBN_(identifier)]`_`f 978-1-4493-6536-3.
>>External links
• Raphaël homepage
• Raphaël syntax
• Raphaël: a JavaScript API for SVG
• An introduction to Raphaël
• Raphael.js: Archived 2011-09-29 at the `F33f`_`[Wayback Machine`:/page/wikibook/entry.mu`zim=wikipedia_en_all_nopic_2025-08.zim|entry_path=Wayback_Machine]`_`f javascript vector graphics library for the web
`c`F0af`_`[↑ Back to top`#top]`_`f`a